<template>
  <view class="mood-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <text class="navbar-title">情绪记录</text>
        <text class="navbar-subtitle">记录你的每一份心情</text>
      </view>
    </view>

    <!-- 情绪趋势图 -->
    <view class="trend-section">
      <view class="section-title">7天情绪趋势</view>
      <view class="trend-chart">
        <view class="chart-container">
          <view class="chart-line">
            <view 
              class="chart-point" 
              v-for="(point, index) in trendData" 
              :key="index"
              :style="{ left: (index * 14.28) + '%', bottom: (point.value * 10) + '%' }"
            >
              <text class="point-emoji">{{ point.emoji }}</text>
            </view>
          </view>
        </view>
        <view class="chart-labels">
          <text v-for="(day, index) in weekDays" :key="index" class="day-label">{{ day }}</text>
        </view>
      </view>
    </view>

    <!-- 快速记录 -->
    <view class="quick-record">
      <view class="section-title">今日心情</view>
      <view class="mood-selector">
        <view 
          class="mood-item" 
          v-for="mood in moodOptions" 
          :key="mood.id"
          :class="{ active: selectedMood === mood.id }"
          @tap="selectMood(mood)"
        >
          <text class="mood-emoji">{{ mood.emoji }}</text>
          <text class="mood-label">{{ mood.label }}</text>
        </view>
      </view>
      <button class="record-btn" @tap="goToAddRecord">详细记录</button>
    </view>

    <!-- 历史记录 -->
    <view class="history-section">
      <view class="section-header">
        <text class="section-title">历史记录</text>
        <text class="view-all" @tap="viewAllHistory">查看全部</text>
      </view>
      <scroll-view scroll-y class="history-list">
        <view class="history-item" v-for="record in recentRecords" :key="record.id">
          <view class="record-date">
            <text class="date-text">{{ formatDate(record.date) }}</text>
            <text class="time-text">{{ formatTime(record.date) }}</text>
          </view>
          <view class="record-content">
            <text class="record-emoji">{{ record.emoji }}</text>
            <view class="record-info">
              <text class="record-mood">{{ record.mood }}</text>
              <text class="record-note" v-if="record.note">{{ record.note }}</text>
            </view>
          </view>
        </view>
        
        <view class="empty-state" v-if="recentRecords.length === 0">
          <text class="empty-emoji">📝</text>
          <text class="empty-text">还没有情绪记录</text>
          <text class="empty-desc">开始记录你的心情吧</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedMood: null,
      weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      trendData: [
        { value: 8, emoji: '😊' },
        { value: 6, emoji: '😐' },
        { value: 4, emoji: '😔' },
        { value: 7, emoji: '😊' },
        { value: 5, emoji: '😐' },
        { value: 9, emoji: '😄' },
        { value: 8, emoji: '😊' }
      ],
      moodOptions: [
        { id: 'happy', emoji: '😊', label: '开心' },
        { id: 'calm', emoji: '😌', label: '平静' },
        { id: 'sad', emoji: '😔', label: '难过' },
        { id: 'angry', emoji: '😠', label: '愤怒' },
        { id: 'anxious', emoji: '😰', label: '焦虑' }
      ],
      recentRecords: []
    }
  },
  
  onLoad() {
    this.loadMoodRecords()
  },
  
  onShow() {
    this.loadMoodRecords()
  },
  
  methods: {
    // 选择心情
    selectMood(mood) {
      this.selectedMood = mood.id
      this.quickSaveMood(mood)
    },
    
    // 快速保存心情
    quickSaveMood(mood) {
      const record = {
        id: Date.now(),
        date: new Date(),
        mood: mood.label,
        emoji: mood.emoji,
        note: ''
      }
      
      try {
        let records = uni.getStorageSync('mood_records') || []
        records.unshift(record)
        uni.setStorageSync('mood_records', records)
        
        uni.showToast({
          title: '记录成功',
          icon: 'success'
        })
        
        this.loadMoodRecords()
      } catch (e) {
        console.error('保存心情记录失败:', e)
        uni.showToast({
          title: '保存失败',
          icon: 'error'
        })
      }
    },
    
    // 跳转到详细记录页面
    goToAddRecord() {
      uni.navigateTo({
        url: '/pages/mood/add'
      })
    },
    
    // 查看全部历史
    viewAllHistory() {
      uni.navigateTo({
        url: '/pages/mood/history'
      })
    },
    
    // 加载心情记录
    loadMoodRecords() {
      try {
        const records = uni.getStorageSync('mood_records') || []
        this.recentRecords = records.slice(0, 5) // 只显示最近5条
      } catch (e) {
        console.error('加载心情记录失败:', e)
        this.recentRecords = []
      }
    },
    
    // 格式化日期
    formatDate(date) {
      const d = new Date(date)
      const today = new Date()
      const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000)
      
      if (d.toDateString() === today.toDateString()) {
        return '今天'
      } else if (d.toDateString() === yesterday.toDateString()) {
        return '昨天'
      } else {
        return `${d.getMonth() + 1}/${d.getDate()}`
      }
    },
    
    // 格式化时间
    formatTime(date) {
      const d = new Date(date)
      return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.mood-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding-bottom: 100rpx;
}

/* 自定义导航栏 */
.custom-navbar {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  padding: 88rpx 40rpx 40rpx;
  color: white;
}

.navbar-content {
  text-align: center;
}

.navbar-title {
  font-size: 44rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 10rpx;
}

.navbar-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
}

/* 趋势图部分 */
.trend-section {
  margin: 40rpx 30rpx;
  background: white;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 30rpx;
}

.trend-chart {
  height: 200rpx;
}

.chart-container {
  position: relative;
  height: 160rpx;
  border-bottom: 2rpx solid var(--border-color);
}

.chart-line {
  position: relative;
  height: 100%;
}

.chart-point {
  position: absolute;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transform: translateX(-50%);
}

.point-emoji {
  font-size: 32rpx;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.day-label {
  font-size: 24rpx;
  color: var(--text-tertiary);
}

/* 快速记录部分 */
.quick-record {
  margin: 0 30rpx 40rpx;
  background: white;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.mood-selector {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.mood-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.mood-item.active {
  background: var(--accent-color);
  transform: scale(1.1);
}

.mood-emoji {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.mood-label {
  font-size: 24rpx;
  color: var(--text-secondary);
}

.mood-item.active .mood-label {
  color: white;
}

.record-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  border: none;
  border-radius: 16rpx;
  padding: 24rpx;
  font-size: 32rpx;
  font-weight: 600;
}

/* 历史记录部分 */
.history-section {
  margin: 0 30rpx;
  background: white;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.view-all {
  font-size: 28rpx;
  color: var(--primary-color);
}

.history-list {
  max-height: 600rpx;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid var(--border-color);
}

.history-item:last-child {
  border-bottom: none;
}

.record-date {
  width: 120rpx;
  margin-right: 30rpx;
}

.date-text {
  font-size: 28rpx;
  color: var(--text-primary);
  display: block;
  margin-bottom: 5rpx;
}

.time-text {
  font-size: 24rpx;
  color: var(--text-tertiary);
}

.record-content {
  flex: 1;
  display: flex;
  align-items: center;
}

.record-emoji {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.record-info {
  flex: 1;
}

.record-mood {
  font-size: 30rpx;
  color: var(--text-primary);
  display: block;
  margin-bottom: 5rpx;
}

.record-note {
  font-size: 26rpx;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80rpx 0;
}

.empty-emoji {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 32rpx;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 10rpx;
}

.empty-desc {
  font-size: 28rpx;
  color: var(--text-tertiary);
}
</style>